<template>

  <!-- 表单 -->
  <el-form :model="form" :rules="rules" ref="form" label-width="80px">
    <!-- 名字输入框 -->
    <el-form-item label="apk名称" prop="appName">
      <el-input style="width:30%" v-model="form.appName" placeholder="apk的下载名称"></el-input>
    </el-form-item>

    <!-- 下拉类表框 -->
    <el-form-item label-width="110px" label="是否可以下载">
      <el-select v-model="form.show" placeholder="请选择">
        <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"></el-option>
      </el-select>
    </el-form-item>

    <!-- 类型选择框 -->
    <el-form-item label-width="107px" label="选择app类型" prop="type">
      <el-select v-model="form.type" placeholder="请选择">
        <el-option v-for="item in optionsType" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-form-item>

    <!-- apk文件上传 -->
    <el-form-item label="选择 .apk文件" label-width="111px">
      <el-upload class="avatar-uploader" ref="upload" :action="config.addAppUrl" :show-file-list="true"
        :on-success="uploadSuccess" :auto-upload="false" :on-error="uploadEro" name="upload" :data="uploadData"
        accept=".apk, .app, .exe" :limit="1">
        <el-button slot="trigger" size="small" type="primary" plain>选取文件</el-button>
      </el-upload>
    </el-form-item>

    <!-- 提交和取消 -->
    <el-form-item style="margin-left: -70px;">
      <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
      <el-button type="primary" @click="resetForm('form')">取消</el-button>
    </el-form-item>
  </el-form>

</template>

<script>
  //Api, 在upload.js中
  // import {
  //   addUploadApkFormApi
  // } from "@/api/upload";
  import store from '@/vuex/store'
  import config from "@/config/config"
  export default {
    data() {
      return {
        form: {
          appName: '',
          show: 1,
          appPath: '',
          addTime: '',
          type: 0
        },
        rules: {
          appName: [{
              required: true,
              message: '请输入app名称',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 10,
              message: '长度在 1 到 100 个字符',
              trigger: 'blur'
            }
          ],
          type: [{
            required: true,
            message: '请选择app类型',
            trigger: 'change'
          }]
        },
        config,
        options: [{
            id: 1,
            label: "可下载"
          },
          {
            id: 0,
            label: "不可下载"
          }
        ],
        uploadData: {
          appKey: '',
          appFlag: 2,
          token:store.getters.token,
          versionCode: 0,
          param: ''
        },
        optionsType: [{
          value: 0,
          label: '请选择类型'
        }, {
          value: 1,
          label: '林权登记平台'
        }, {
          value: 2,
          label: '农村不动产登记平台政府版'
        }, {
          value: 3,
          label: '农村不动产登记平台企业版'
        }],
      }
    },
    methods: {
      // 表单上传
      onSubmit(form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            this.uploadData.param = JSON.stringify(this.form)
            this.$refs.upload.submit();
            this.loading = true;
            setTimeout(
              () => this.resetForm('form'),
              1000
            )
          } else {
            return false;
          }
        });
      },
      // 清空表单选项
      resetForm(form) {
        this.$refs.upload.clearFiles();
        this.$refs[form].resetFields();
      },
      uploadSuccess(response) {
        this.$message({
          message: 'apk上传成功',
          type: 'success'
        });
        this.loading = false
      },
      uploadEro(response) {
        this.$message.error('apk上传失败');
        this.loading = false
      },
    }
  }
</script>